<!--
 * @Author: xuwejie 1529315455@qq.com
 * @Date: 2023-08-28 14:39:13
 * @LastEditors: xuwejie 1529315455@qq.com
 * @LastEditTime: 2023-11-30 10:32:58
 * @FilePath: \v9\src\App.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div id="app">
    <router-view v-if="isRouterAlive" />

    <div class="all" v-if="showDialog" @click="closeAll">
      <div class="all-box flex-column-center">
        <div class="all-box-title flex-row-center">
          <img
            src="./assets/images/process/error.png"
            class="all-box-title-img"
          />
          <span class="all-box-title-span">系统提示</span>
        </div>
        <div class="all-box-content">
          如需订购该功能，请联系所属市场经理进行 付费并开启
        </div>
        <div class="all-box-btn">知道了</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "App",
  provide() {
    //父组件中通过provide来提供变量，在子组件中通过inject来注入变量。
    return {
      reload: this.reload,
      openAll: this.openAll,
      broadcast: this.broadcast,
    };
  },
  data() {
    return {
      isRouterAlive: true, //控制视图是否显示的变量
      showDialog: false,
      broadcast: new BroadcastChannel('broadcast'),  // 跨页面通知
    };
  },
  created() {
    // console.log(process.env);
  },
  methods: {
    reload() {
      this.isRouterAlive = false; //先关闭，
      this.$nextTick(() => {
        this.isRouterAlive = true; //再打开
      });
    },
    openAll() {
      this.showDialog = true;
    },
    closeAll() {
      this.showDialog = false;
    },
  },
};
</script>
<style lang="scss">
.el-table--small {
  font-size: 14px !important;
}
.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}
.flex-btw {
  display: flex !important;
  justify-content: space-between;
  align-items: center;
}

.flex-aro {
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.flex-middle {
  display: flex;
  align-items: center;
}
.flex-column {
  display: flex;
  flex-direction: column;
}
.cascader {
  .el-cascader-panel {
    .el-radio {
      width: 100%;
      height: 100%;
      z-index: 10;
      position: absolute;
      top: 10px;
      right: -10px;
    }
    .el-radio__input {
      visibility: hidden; //隐藏单选框，不隐藏就不用设置
    }
    .el-cascader-node__postfix {
      top: 10px;
    }
  }
}

.flex-row-start {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
}

.flex-row-between {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.flex-row-around {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}

.flex-row-end {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
}

.flex-row-center {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.flex-column-start {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.flex-column-between {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.flex-column-around {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

.flex-column-end {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.flex-column-center {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.all {
  position: absolute;
  z-index: 9999;
  inset: 0;
  background: rgba($color: #000000, $alpha: 0.3);
  &-box {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 372px;
    height: 164px;
    background: #fff;
    box-shadow: 0px 0px 10px 0px rgba(4, 0, 0, 0.2);
    border-radius: 10px;
    &-title {
      align-items: center;
      &-img {
        width: 30px;
        height: 30px;
        img {
          width: 100%;
          height: 100%;
        }
      }
      &-span {
        font-size: 24px;
        font-family: PingFang SC;
        font-weight: bold;
        color: #303030;
      }
    }
    &-content {
      width: 304px;
      font-size: 16px;
      font-family: PingFang SC;
      font-weight: bold;
      color: #808080;
      margin: 15px auto;
      text-align: center;
      line-height: 24px;
    }
    &-btn {
      width: 123px;
      height: 30px;
      background: #f13130;
      border-radius: 15px;
      text-align: center;
      line-height: 30px;
      font-size: 14px;
      font-family: PingFang SC;
      font-weight: 400;
      color: #ffffff;
      margin: 0 auto;
      &:hover {
        cursor: pointer;
      }
    }
  }
}
.pointer {
  cursor: pointer;
}
</style>
